<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<u-navbar :placeholder="true" title="我的卡券" :autoBack="true"></u-navbar>
		<view v-if="userPackage.canUse && userPackage.canUse.length>0">
			<view class="text-black text-bold margin-sm">可用卡券</view>
			<view v-for="(item,index) in userPackage.canUse" :key="index" class="margin-sm padding-sm bg-white radius"
				@click="changePackage(index)">
				<view class="flex align-start justify-between ">
					<view>
						<view class="text-lg text-black text-bold">{{item.StorePackage.Title}}</view>
						<view class="text-sm margin-top-sm">可用范围：{{CanUseRoom(item.StorePackage)}}</view>
						<view class="text-sm ">
							有效期至：{{item.StorePackage.TermOfValidity?item.StorePackage.TermOfValidity:'无限制'}}</view>
					</view>
					<view class="flex flex-direction" style="160rpx">
						<radio :class="index==changeIndex?'checked':''" :checked="index==changeIndex?true:false"
							class="blue">
						</radio>
					</view>
				</view>
				<u-line dashed margin="20rpx 0 20rpx 0"></u-line>
				<view class="text-sm text-gray">{{canUseTime(item.StorePackage)}}</view>
			</view>
		</view>
		<view v-else>
			<view class="flex flex-direction align-center margin-sm">
				<u-empty mode="coupon" text="暂无可用优惠券"></u-empty>
				<view class="text-sm margin-top-sm" style="width: 600rpx;">如在美团、大众上购买卡券的，可以选择团购兑换或者直接购买卡券</view>
			</view>
			<view class="flex align-center justify-center margin-top-lg">
				<button @click="exchangePackage" class="cu-btn lg bg-white margin-right-sm"
					style="border: 1px #0081ff solid;">
					<view class="flex align-center" style="position: relative;">
						<image src="http://n298651t63.zicp.vip:9001/img/%E7%BE%8E%E5%9B%A2.png"
							style="width: 60rpx; height: 60rpx;border-radius: 60rpx;z-index: 1;" mode="aspectFit">
						</image>
						<image src="http://n298651t63.zicp.vip:9001/img/%E5%A4%A7%E4%BC%97%E7%82%B9%E8%AF%84.png"
							style="width: 60rpx; height: 60rpx;border-radius: 60rpx;position: absolute;left: 30rpx;"
							mode="aspectFit"></image>
						<text style="margin-left: 50rpx;" class="text-blue">团购兑换</text>
					</view>
				</button>
				<button @click="goBuyPackage" class="cu-btn lg bg-tea margin-left-sm">购买卡券</button>
			</view>
		</view>
		<view class="margin-top-lg padding-bottom-lg">
			<view class="text-black text-bold margin-left-sm"
				v-show="userPackage.canNotUse && userPackage.canNotUse.length>0">不可用卡券</view>
			<view v-for="(item,index) in userPackage.canNotUse" :key="index"
				class="margin-sm padding-sm bg-white radius">
				<view class="flex align-start justify-between  ">
					<view>
						<view class="text-lg text-gray text-bold">{{item.StorePackage.Title}}</view>
						<view class="text-sm margin-top-sm text-gray">可用范围：{{CanUseRoom(item.StorePackage)}}
						</view>
						<view class="text-sm text-gray">
							有效期至：{{item.StorePackage.TermOfValidity?item.StorePackage.TermOfValidity:'无限制'}}
						</view>
					</view>
				</view>
				<u-line dashed margin="20rpx 0 20rpx 0"></u-line>
				<view class="text-sm text-gray">{{canUseTime(item.StorePackage)}}</view>
				<view class="text-red margin-top-sm text-sm">不可用原因:{{item.CanNotUserReason}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userPackage: {},
				changeIndex: -1,
			}
		},
		onLoad() {
			this.userPackage = uni.getStorageSync('UserPackage');
			uni.setStorageSync('UserPackage', []);
		},
		methods: {
			exchangePackage() {
				uni.navigateTo({
					url: '/pagesA/user/mypackage?index=2',
				})
			},
			changePackage(index) {
				this.changeIndex = index;
				//uni.setStorageSync('ChangePackageId', this.userPackage.canUse[index].Id);
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('acceptDataFromOpenedPage', this.userPackage.canUse[index]);
				uni.navigateBack();
			},
			CanUseRoom(item) {
				return item.RoomRange.map((x) => {
					return x.roomName
				}).join('、');
			},
			canUseTime(item) {
				//该卡券适用于周一、二、三、四、五、六 22:00-06:00可用
				let day = '该卡券适用于周' +
					item.WeekList.map((x) => {
						return x.name
					}).join('、');
				day += (item.CanUseTime ? ' ' + item.CanUseTime : ' 全天通用');
				return day;
			},
			goBuyPackage() {

				uni.switchTab({
					url: '/pages/index/package'
				})
			}
		}
	}
</script>

<style>
</style>
